import React, {Component} from 'react'
import Taro from '@tarojs/taro'
import {View, Input} from '@tarojs/components'
import {AtNavBar} from 'taro-ui'
import './index.scss'

/**
 * 渲染组件
 */
class Navbar extends Component {

    constructor(props) {
        super(props)
        this.state = {}
    }

    getInput(e){
        console.log('=====1111===')
        const { onChange } = this.props
        onChange && onChange(e)
        return e.detail.value.replace(/11/g, '2') /** 第一次聚焦，将光标放在最后一位 ***/
    }

    render() {
        let { title, value, border, inputBorder, size, disabled, titleWidth, inputWidth, placeholder, center } = this.props
        const Sty = {
            borderBottom: border ? border : '1px solid #eee',
            fontSize: (size || '32') + 'rpx'
        }
        const title_sty = {
            width: titleWidth ? (titleWidth + '%') : '40%',
            whiteSpace: 'wrap',
        }
        const input_sty={
            width: inputWidth ? (inputWidth + '%') : '60%',
            border: inputBorder ? inputBorder : 'none',
            textAlign: center ? center : 'right'
        }
        return (
            <View className='CuInput' style={Sty}>
                <View style={title_sty}>{title ? title : '标题'}</View>
                <Input
                  placeholder={placeholder ? placeholder : '请输入'}
                  disabled={disabled || false} value={value}
                  style={input_sty} className='input_style'
                  onInput={this.getInput.bind(this)}
                />
            </View>
        )
    }
}

export default Navbar
